import React, { useState } from "react";
import { Block, Card, message, Button } from "@ct0/ui";
import PanelTemplate from "./panelTemplate";
import { Refresh, Help, Delete } from "@ct0/icons";

export default function CardPanel() {
  const [collapse, setCollapse] = useState(true);

  const data = {
    title: "Card 卡片",
    descriptions: ["最基础的卡片容器，可承载文字、列表、图片、段落等等"],
    content: {
      title: "代码演示",
      columns: 2,
      children: [
        {
          title: "基础调用",
          component: <Card title="title"></Card>,
          codeSnippet: `import Card from '@ct0/ui'
<Card title="title" />`,
        },
        {
          title: "展开收起（非受控）",
          component: <Card title="title" collapsible={true}></Card>,
          codeSnippet: `import Card from '@ct0/ui'
<Card title="title" collapsible={true}/>`,
        },
        {
          title: "展开收起（受控）",
          component: (
            <>
              <Button
                style={{ marginBottom: "10px" }}
                type="blue"
                onClick={() => setCollapse(!collapse)}
              >
                {collapse ? "折叠" : "不折叠"}
              </Button>
              <Card
                title="title"
                collapsible={true}
                collapse={collapse}
                onCollapse={setCollapse}
              ></Card>
            </>
          ),
          codeSnippet: `import Card from '@ct0/ui'
<Card 
  title="title" 
  collapsible={true}
  collapse={collapse} 
  onCollapse={setCollapse}
></Card>`,
        },
        {
          title: "编辑",
          component: (
            <Card
              title="title"
              onEdit={() => message.success("编辑回调")}
            ></Card>
          ),
          codeSnippet: `import Card from '@ct0/ui'
<Card title="title" onEdit={() => { message.success("编辑回调") }}`,
        },
        {
          title: "更多",
          component: (
            <Card
              title="title"
              onMore={() => {
                message.success("更多回调");
              }}
            ></Card>
          ),
          codeSnippet: `import Card from '@ct0/ui'
<Card title="title onMore={() => { message.success("更多回调")}}></Card>`,
        },
        {
          title: "刷新操作",
          component: (
            <Card
              title="title"
              onRefresh={() => message.success("刷新回调")}
            ></Card>
          ),
          codeSnippet: `import Card from '@ct0/ui'
<Card title="title onRefresh={() => { message.success("刷新回调")}}></Card>`,
        },
        {
          title: "删除操作",
          component: (
            <Card
              title="title"
              onDelete={() => message.success("删除回调")}
            ></Card>
          ),
          codeSnippet: `import Card from '@ct0/ui'
<Card title="title onDelete={() => { message.success("删除回调")}}></Card>`,
        },
        {
          title: "滚动条",
          component: (
            <Block width="500px">
              <Card title="title" contentOverflow="auto">
                <div style={{ width: "600px" }}>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Nobis autem quibusdam rem a odit, omnis illum nostrum
                  voluptates perferendis inventore sit, quod nulla eveniet
                  temporibus tempore voluptatum hic. Libero, enim!
                </div>
              </Card>
            </Block>
          ),
          codeSnippet: `import Card from '@ct0/ui'
<Card title="title contentOverflow="auto"></Card>`,
        },
      ],
    },
    componentApi: [
      {
        param: "title",
        description: "标题",
        type: "string",
      },
      {
        param: "collapsible",
        description: "Card是否可展开收起",
        type: "boolean",
      },
      {
        param: "defaultCollapse",
        description: "默认折叠状态, true 折叠，false 不折叠",
        type: "boolean",
        default: "true",
      },
      {
        param: "collapse",
        description: "折叠状态，true 折叠，false 不折叠",
        type: "boolean",
      },
      {
        param: "className",
        description: "类名",
        type: "string",
      },
      {
        param: "className",
        description: "容器类名",
        type: "string",
      },
      {
        param: "style",
        description: "容器自定义样式",
        type: "CSSProperties",
      },
      {
        param: "onEdit",
        description:
          "点击编辑操作的回调函数, 如果设置onEdit函数，则Card标题处会显示编辑icon",
        type: "() => void",
      },
      {
        param: "onCollapse",
        description: "触发展开收取操作时的回调函数",
        type: "(state: boolean) => void",
      },
      {
        param: "onMore",
        description: "卡片点击更多操作的回调函数",
        type: "() => void",
      },
      {
        param: "onRefresh",
        description: "卡片点击刷新操作的回调函数",
        type: `() => void`,
      },
      {
        param: "onDelete",
        description: "卡片点击删除操作的回调函数",
        type: `() => void`,
      },
      {
        param: "contentOverflow",
        description: "当card内容超过卡片设置高度时的内容的展示方式",
        type: "'auto' | 'visible' | 'hidden' | 'scroll' | 'inherit'",
      },
    ],
  };

  return <PanelTemplate {...data} />;
}
